<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" show-fullscreen destroy-on-close width="750px" @close="close">
		<el-form ref="formRef" label-width="120px" :model="formData" :rules="rules">
			<el-form-item label="物料编号" prop="itemCode">
				<el-input
					v-model.trim="formData.itemCode"
					placeholder="请输入物料编号"
					:maxlength="64"
					show-word-limit
					:disabled="mode == 'edit'"
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="物料名称" prop="itemName">
				<el-input
					v-model.trim="formData.itemName"
					placeholder="请输入物料名称"
					:maxlength="64"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="物料型号" prop="model">
				<el-input
					v-model.trim="formData.model"
					placeholder="请输入物料型号"
					:maxlength="128"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="物料规格" prop="spec">
				<el-input
					v-model.trim="formData.spec"
					placeholder="请输入物料规格"
					:maxlength="128"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="计量单位" prop="unit">
				<el-input
					v-model.trim="formData.unit"
					placeholder="请输入计量单位"
					:maxlength="16"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="物料属性" prop="attr">
				<el-radio-group v-model="formData.attr">
					<el-radio
						v-for="item in attrOptions"
						:key="item.value"
						:label="item.value"
						>{{ item.label }}</el-radio
					>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="物料分类" prop="classify">
				<el-radio-group v-model="formData.classify">
					<el-radio
						v-for="item in classifyOptions"
						:key="item.value"
						:label="item.value"
						>{{ item.label }}</el-radio
					>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="条码校验规则" prop="rules">
				<sc-form-table
					ref="table"
					v-model="formData.rules"
					:addTemplate="addRuleTemplate"
					placeholder="暂无数据">
					<el-table-column prop="rule" label="校验规则（$ 为占位符，长度完全匹配）" width="480">
						<template #default="scope">
							<el-input
								v-model.trim="scope.row.rule"
								placeholder="请输入条码校验规则"
								:maxlength="64"
								show-word-limit
								clearable>
							</el-input>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-form-item>
			<el-form-item label="保质期（天）" prop="expiration">
				<el-input-number v-model="formData.expiration" :min="0" :max="9999" />
			</el-form-item>
			<el-form-item label="物料供应商" prop="supplier">
				<el-input
					v-model.trim="formData.supplier"
					placeholder="请输入物料供应商"
					:maxlength="64"
					show-word-limit
					clearable>
				</el-input>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
export default {
	emits: ['complete'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			addRuleTemplate: {
				rule: '',
			},
			attrOptions: [],
			classifyOptions: [],
			formData: {
				id: 0,
				itemCode: '',
				itemName: '',
				model: '',
				spec: '',
				unit: '',
				attr: 0,
				classify: 0,
				rules: [],
				expiration: 0,
				supplier: '',
			},
			rules: {
				itemCode: [{ required: true, message: "请输入物料编号", trigger: "blur" }],
				itemName: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
				attr: [{ required: true, message: "请输入物料属性", trigger: "blur" }],
				classify: [{ required: true, message: "请输入物料分类", trigger: "blur" }],
				rules: [{ required: true, message: "请输入条码校验规则", trigger: "blur" }],
			},
		};
	},
	methods: {
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				const resp = await this.$API.mditem.model.get(row.id);
				this.formData = resp.data;
				this.formData.rules = this.formData.rules.map(s => {
					return { rule: s };
				});
			}

			const resp2 = await this.$API.enumlist.model.get('materialAttrEnum');
			this.attrOptions = resp2.data;
			const resp3 = await this.$API.enumlist.model.get('materialClassifyEnum');
			this.classifyOptions = resp3.data;

			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					this.formData.rules = this.formData.rules.map(s => s.rule);
					let resp = null;
					if (this.formData.id === 0) {
						resp = await this.$API.mditem.add.post(this.formData);
					} else {
						resp = await this.$API.mditem.update.put(this.formData);
					}
					this.isSaveing = false;
					if (resp.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("保存成功");
					} else {
						this.$alert(resp.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.formData = {
				id: 0,
				itemCode: '',
				itemName: '',
				model: '',
				spec: '',
				unit: '',
				attr: 0,
				classify: 0,
				rules: [],
				expiration: 0,
				supplier: '',
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
